<template>
	<view>
		<uni-list-item showArrow title="头像" link @click="changeUserPic">
			<view class="flex align-center px-2" slot="right">
				<image :src="userinfo.userpic ? userinfo.userpic : '/static/default.jpg'"
					style="height: 100rpx; width: 100rpx;" class="rounded-circle"></image>
				<text class="iconfont icon-bianji1 ml-2 text-muted font"></text>
			</view>
		</uni-list-item>
		<uni-list-item showArrow title="昵称" link>
			<view class="flex align-center px-2" slot="right">
				<input type="text" v-model="username" class="text-right" />
				<text class="iconfont icon-bianji1 ml-2 text-muted font"></text>
			</view>
		</uni-list-item>
		<uni-list-item showArrow title="性别" link @click="changeUserSex">
			<view class="flex align-center px-2" slot="right">
				<text>{{sexval}}</text>
				<text class="iconfont icon-bianji1 ml-2 text-muted font"></text>
			</view>
		</uni-list-item>
		<picker mode="date" :value="brithday" @change="changeBrithday">
			<uni-list-item showArrow title="生日" link>
				<view class="flex align-center px-2" slot="right">
					<text>{{brithday}}</text>
					<text class="iconfont icon-bianji1 ml-2 text-muted font"></text>
				</view>
			</uni-list-item>
		</picker>
		<uni-list-item showArrow title="情感" link @click="changeUserEmotion">
			<view class="flex align-center px-2" slot="right">
				<text>{{emotionval}}</text>
				<text class="iconfont icon-bianji1 ml-2 text-muted font"></text>
			</view>
		</uni-list-item>
		<uni-list-item showArrow title="职业" link @click="changeUserJob()">
			<view class="flex align-center px-2" slot="right">
				<text>{{job}}</text>
				<text class="iconfont icon-bianji1 ml-2 text-muted font"></text>
			</view>
		</uni-list-item>
		<uni-list-item showArrow title="家乡" link @click="showCityPicker">
			<view class="flex align-center px-2" slot="right">
				<text>{{pickerText}}</text>
				<text class="iconfont icon-bianji1 ml-2 text-muted font"></text>
			</view>
		</uni-list-item>
		<view class="pt-4 px-2">
			<button class=" bg-main text-white  text-center" style="border-radius: 50rpx;" @click="submit">
				完成
			</button>
		</view>

		<!-- 省市区三级联动 -->
		<mpvueCityPicker></mpvueCityPicker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"></mpvue-city-picker>

	</view>
</template>

<script>
	var sexArr = ['保密', '男', '女']
	var emotionArr = ['保密', '已婚', '未婚']
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
	import mpvueCityPicker from "@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '河北省-石家庄市-长安区',
				username: '昵称',
				sex: 0,
				emotion: 1,
				job: 'IT',
				brithday: '2019-03-18'
			}
		},
		onLoad() {
			let user = this.userinfo.userinfo
			if(user){
				this.username = this.userinfo.username
				this.sex = user.sex
				this.emotion = user.qg
				this.job = user.job
				this.brithday = user.birthday
				this.pickerText = user.path
				
			}
		},
		// 监听返回
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		// 监听页面卸载
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		computed: {
			sexval() {
				return sexArr[this.sex]
			},
			emotionval() {
				return emotionArr[this.emotion]
			},
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		methods: {
			//修改头像
			changeUserPic() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ["album", "camera"],
					success: (res) => {
						console.log(res)
						this.$H.upload('/edituserpic', {
							filePath: res.tempFilePaths[0],
							name: 'userpic',
							token: true
						}).then(result => {
							console.log(result)
							let userpicurl = result.data.substring(25, result.data.length)
							this.$store.commit('editUserInfo', {
								key: "userpic",
								// value: 'http://47.242.125.60/' + userpicurl
								value: result.data
							})
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
						})
						
					}
				})
			},
			//修改性别
			changeUserSex() {
				uni.showActionSheet({
					itemList: sexArr,
					success: (res) => {
						this.sex = res.tapIndex
					},
				});
			},
			//修改情感
			changeUserEmotion() {
				uni.showActionSheet({
					itemList: emotionArr,
					success: (res) => {
						this.emotion = res.tapIndex
					},
				});
			},
			//修改职业
			changeUserJob() {
				let jobArr = ["IT", "人力", "会计"]
				uni.showActionSheet({
					itemList: jobArr,
					success: (res) => {
						this.job = jobArr[res.tapIndex]
					},
				});
			},
			//修改生日
			changeBrithday(e) {
				this.brithday = e.detail.value
			},
			//显示省级联动
			showCityPicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				console.log(e)
				this.pickerText = e.label
			},
			submit(){
				let obj ={
					name:this.username,
					sex:this.sex,
					qg:this.emotion,
					job:this.job,
					birthday:this.brithday,
					path:this.pickerText
				}
				this.$H.post('/edituserinfo',obj,{
					token:true
				}).then(res => {
					this.$store.commit('editUserInfo',{
						key:"username",
						value:this.username
					})	
					this.$store.commit('editUserUserInfo',obj)
					uni.navigateBack({
						delta: 1
					});
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					uni.$emit('updateInfo')
				})
			}
		}
	}
</script>

<style>

</style>
